<template>
  <div class="my-inquiry">
    <menu-content-layout title="我的询价">
      <template slot="icon">
        <img src="~/assets/images/my-inquiry1.png" alt="" />
      </template>
      <template slot="content">
        <menu-content-tabs :tabs="tabs" @switch-tab="handleSwitchTab" />
        <div v-if="$route.name === 'MyInquiry'" class="list-wrap">
          <div class="list">
            <div
              class="item cursor"
              v-for="(item, index) in list"
              :key="index"
              @click="goDetail(item.id)"
            >
              <div class="pic" v-if="item.product[0].product">
                <img :src="item.product[0].product.image" class="objectCover" />
              </div>
              <div class="info">
                <p class="number mbt10">询价编号：{{ item.code }}</p>
                <p class="name">
                  产品名称：{{ item.product[0].product && item.product[0].product.store_name
                  }}{{ item.product.length > 1 ? "等" : "" }}
                </p>
                <p class="merchant">发送商家：{{ item.mer_info.mer_name }}</p>
                <p class="date">{{ item.create_time }}</p>
                <p v-if="item.status === 5" class="complaint">本条询价已被商家投诉，无法查看详情，如需帮助请联系平台021-88998899</p>
              </div>
              <div class="btns" v-if="item.is_complaint !== 1">
                <m-button
                  width="108"
                  style="margin-bottom: 15px"
                  v-if="item.is_new_a === 1 && item.is_new_b === 0"
                >已回复</m-button>
                <m-button
                  width="108"
                  class="grayBtn"
                  type="dark"
                  style="margin-bottom: 15px"
                  v-else
                  >未回复</m-button>
              </div>
              <div class="btns" v-else>
                <m-button
                  width="108"
                  class="grayBtn"
                  type="dark"
                  style="margin-bottom: 15px"
                >已关闭</m-button>
              </div>
            </div>
          </div>
          <nodata message="暂时没有数据" :status="listStatus"></nodata>
          <m-pagination
            :pagination="total"
            :page-size="limit"
            @changePage="changeThisPage"
          />
        </div>
        <router-view />
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
import MButton from "@/components/common/m-button/MButton"
import MPagination from "@/components/common/m-pagination/MPagination"
import MenuContentLayout from "@/components/common/menu-content-layout/MenuContentLayout"
import MenuContentTabs from "@/components/common/menu-content-tabs/MenuContentTabs"
import { getMyInquiry } from "@/request/api"

export default {
  name: "MyInquiry",
  components: { MenuContentTabs, MenuContentLayout, MPagination, MButton },
  data() {
    return {
      tabs: [
        { name: "全部询价", value: "-1" },
        { name: "已回复", value: "1" },
        { name: "待回复", value: "0" }
      ],
      list: [],
      listStatus: 1,
      page: 1,
      total: 1,
      noPic: require("assets/images/nopic.jpg"),
      limit: 5,
      state: -1
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 去详情 */
    goDetail(id) {
      this.$router.push({
        path: "/profile/purchase-management/my-inquiry/details",
        query: { id: id }
      })
    },
    /** 切换菜单tab */
    handleSwitchTab(index) {
      this.state = index.value
      this.getList()
      // 询价详情页面中切换tab返回到询价页面
      if (this.$route.name === "MyInquiryDetails") {
        this.$router.push({ name: "MyInquiry" })
      }
    },
    /** 获取询价列表 */
    getList() {
      this.list = []
      this.listStatus = 1
      this.$common.toTop()
      let data = {
        page: this.page,
        limit: this.limit,
        state: this.state
      }
      this.getMyInquiryList(data)
    },
    getMyInquiryList(data) {
      getMyInquiry(data).then((res) => {
          if (res.status === 200) {
            this.list = res.data.data
            this.total = res.data.total
            if (this.total == 0) {
              this.listStatus = 0
            } else {
              this.listStatus = 2
            }
            window.scrollTo({ top: 0 });
          }
        }).catch((err) => {
          this.listStatus = 0
          this.$message.error(err.message)
        })
    },
    /** 分页 */
    changeThisPage(page) {
      this.page = page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
/deep/ .grayBtn .el-button {
  background: #999 !important;
}
/deep/ .el-table__body-wrapper {
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
}
.my-inquiry {
  .list {
    margin-top: 30px;
    margin-bottom: 50px;

    .item {
      background-color: rgb(243, 244, 247);
      border: solid 1px #eaeaea;
      padding: 15px;
      display: flex;
      align-items: center;
      position: relative;

      &:not(:last-of-type) {
        margin-bottom: 15px;
      }

      .pic {
        width: 138px;
        height: 138px;
        margin-right: 15px;
        background-color: mediumaquamarine;
      }

      .info {
        color: #666;
        font-size: 15px;

        p {
          margin-bottom: 10px;
        }

        .date {
          color: #969696;
          font-size: 14px;
        }
      }

      .btns {
        position: absolute;
        right: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        .hoverColor {
          width: 108px;
          height: 45px;
          border: 1px solid #e48b2c;
          color: #e48b2c;
          line-height: 43px;
          border-radius: 10px;
          text-align: center;
        }
        .hoverColor:hover {
          color: #fff;
          background: #e48b2c;
        }
      }
      .complaint {
        color:red;
        font-size:12px;
      }
    }
  }
}
</style>
